<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>谁是卧底在线分发|第七页</title>
  <meta name="description" content="谁是卧底在线分发" />
  <meta name="keywords" content="第七页,diqye,谁是卧底" />
  <link href="http://cdn.bootcss.com/meyer-reset/2.0/reset.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/common.css">
  <style media="screen">

  .layout-content{
    background: #f1f1f1;
    margin-top: 40px;
    padding: 0px;
  }
  .layout-content textarea:focus,
  .layout-content input:focus{
    outline:1px solid #316ccb;
  }
  .layout-content textarea,
  .layout-content input{
    display: block;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    border:none;
    margin-top: 10px;
  }

  .layout-content h3{
    font-size: 20px;
    text-align: center;
  }
  .layout-content p{
    margin-top: 10px;
    color: #959595;
    padding-left: 20px;
  }

  .btn{
    display: block;
    margin-top: 10px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    color: #fff;
    background: #316ccb;
  }
  .btn.default{
    background: #fff;
    border: 1px solid #316ccb;
    color: #000;
  }
  </style>
</head>
<body>
<form action="?" method="post" >
  <div class="layout-content">
    <h3>谁是卧底房间创建</h3>
    <input type="number" id="renshu" name="renshu"  placeholder="请输入人数">
    <p id="info">平民(0) VS 卧底(0) </p>
    <input type="text" id="pingmin" name="pingmin" placeholder="平民词">
    <input type="text" id="wodi" placeholder="卧底词" name="wodi">
    <a href="javascript:submit()" id="create-btn" class="btn">创建房间</a>
    <!-- <a href="javascript:void 0" id="create2-btn" class="btn">创建房间(空白卧底)</a> -->
    <a href="javascript:randomInit()" class="btn default">更换词语</a>
  </div>
</form>
  <template>
班主任-班长
班主任-辅导员
包青天-狄仁杰
包子-饺子
包子-水饺
被子-床单
壁纸-贴画
饼干-薯片
饼干-薯片
玻璃-镜子
菠萝蜜-榴莲
餐巾纸-湿巾
晨光-真彩
橙子-橘子
丑小鸭-灰姑娘
唇膏-口红
电风扇-空调
电脑-ipad
动物-植物
豆浆-牛奶
豆浆-牛奶
端午节-中秋节
鹅毛-鸡毛
反弹琵琶-乱弹棉花
饭桶-饭碗
福尔摩斯-工藤新一
福尔摩斯-柯南
  </template>
<script>
  // SelectorString -> Element
  function $(selector){
    return document.querySelector(selector);
  }

  // Number -> Number
  function randomN(n){
    return parseInt(Math.random() * n)
  }

  //[String]
  var dicts = $("template").innerHTML.trim().split("\n")

  // () -> ()
  function randomInit(){
    // Number
    var index = randomN(dicts.length)
    $("#pingmin").value = dicts[index].split("-")[0]
    $("#wodi").value = dicts[index].split("-")[1]
  }

  randomInit()

  // () -> Boolean
  function validate(){
    var renshu = $("#renshu").value;
    if(renshu == "" ) {
      tip("请输入人数")
      return false
    }

    var renshuN = parseInt(renshu);
    if(renshuN < 4){
      tip("人数最少4个人")
      return false
    }
    return true
  }

  // () -> {renshu:String,pingmin:String,wodi:String}
  function contextToParams(){
    var renshu = $("#renshu").value
    var pingmin = $("#pingmin").value
    var wodi = $("#wodi").value
    return {
      renshu:renshu,
      pingmin:pingmin,
      wodi:wodi
    }
  }

  function submit(){
    if(validate() == false){
      return
    }

    $("form").submit();
  }

  $("#renshu").addEventListener("keyup",function(){
    var renshu = $("#renshu").value
    var renshuN = parseInt(renshu)
    if(isNaN(renshuN)){
      tip("请输入正确的人数")
      $("#renshu").value = ""
      return null
    }

    var n = parseInt(renshuN/4)
    $("#info").innerHTML = "平民("+(renshuN - n)+") VS 卧底("+n+")"
  });

// String -> ()
function tip(msg){
  var body = document.querySelector("body")
  var div = document.createElement("div")
  div.className = "tip"
  div.innerHTML = msg
  body.appendChild(div)
  setTimeout(function(){
    div.remove();
  },3000);
}

</script>
<script src="http://push.zhanzhang.baidu.com/push.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?b2bbe15f6360c94f05386e2f2bb47277";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
